<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项</title>
</head>
<body>
  <div id="app">
    <!-- 标题 -->
    <h2>待办事项列表</h2>
    <h3>今日事，今日毕！</h3>

    <!-- 输入，添加新待办事项 -->
    <input
      type="text"
      placeholder="请输入新待办事项"
      v-model.trim="inputValue"
      class="input"
      ref="inputRef"
      @keydown.enter="handleAdd"
    >
    <button @click="handleAdd">添加</button>

    <!-- 显示所有待办事项 -->
    <h3>所有待办事项：</h3>
    <ul v-if="todos.length">
      <li
        v-for="todo of todos"
      >
        <input type="checkbox" v-model="todo.completed">
        {{ todo.id }} - {{ todo.title }} - {{ todo.completed ? '已' : '未' }}完成 - 
        <button @click="toggleTodoItem(todo, $event)">修改完成状态</button>
        <button @click="removeTodoItem(todo.id)">删除</button>
      </li>
    </ul>
    <div v-else>待办事项为空，请添加新待办事项！</div>
    <div>共计{{total}}项，已完成{{completed}}项，未完成{{uncompleted}}项</div>
    <a href="https://www.baidu.com" @click.prevent="removeAllCompletedTodos">删除{{completed}}项已完成事项</a>
  </div>

  <script src="./libs/vue.js"></script>
  <script>
    // 初始化待办事项数组
    const initialTodos = new Array(3).fill(null).map((v, i) => ({
      id: i + 1,
      title: '待办事项内容' + (i + 1),
      completed: false
    }))

    // 编号
    let index = initialTodos.length

    new Vue({
      el: '#app',
      data: {
        // 保存所有待办事项
        todos: initialTodos,
        // 文本框中的值
        inputValue: '初始值'
      },
      computed: {
        total() { // 总计项数
          return this.todos.length
        },
        completed() { // 已完成项数
          return this.todos.filter(todo => todo.completed).length
        },
        uncompleted() { // 未完成项数
          return this.todos.filter(todo => !todo.completed).length
        }
      },
      methods: {
        /**
         * 切换待办事项状态
         */
        toggleTodoItem(todo, event) {
          todo.completed = !todo.completed
          // console.log('event:', event)
        },
        /**
         * 删除待办事项
         */
        removeTodoItem(id) {
          this.todos = this.todos.filter(todo => todo.id !== id)
        },
        /**
         * 点击添加按钮，添加新待办事项
         */
        handleAdd() {
          // 让文本框获得焦点
          // document.querySelector('.input').focus()
          this.$refs.inputRef.focus()
          // 如果输入内容为空，则停止添加
          if (this.inputValue.length === 0) {
            return
          }
          // 向数组中保存新待办事项
          this.todos.push({
            id: ++index,
            title: this.inputValue,
            completed: false
          })
          // 清空文本框内容
          this.inputValue = ''
        },
        // handleKeydown(event) {
        //   event.stopPropagation()
        //   // 回车，添加
        //   if (event.keyCode === 13) {
        //     this.handleAdd()
        //   }
        // },
        /**
         * 删除已完成待办事项
         */
        removeAllCompletedTodos() {
          this.todos = this.todos.filter(todo => !todo.completed)
        }
      }
    })
  </script>
</body>
</html>